<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/styles/mapeidtor.css">
</head>

<body>
    <div class="main" id="app">
        <div class="operations">
            <div>
                <div class="f-item"><label for="map-width">地图宽度</label><input type="number" id="map-width" v-model="width"></div>
                <div class="f-item"><label for="map-height">地图高度</label><input type="number" id="map-height" v-model="height"></div>
                <div class="land-list">地形边界：</div>
                <div class="ter-list f-item">                    
                    <div class="current-grid" v-if="borderItems.length">
                        <img :src="currentBorder.src" :title="currentBorder.name" @click="isBorderListShow = !isBorderListShow">
                    </div>
                    <div class="grid-options" v-show="isBorderListShow">                        
                        <div class="grid-item" v-for="item in borderItems" @click="changeBorder(item)">
                            <img :src="item.src" :title="item.name">
                        </div>
                    </div>
                </div>
                <div class="land-list">初始地形：</div>
                <div class="ter-list f-item">                    
                    <div class="current-grid" v-if="landItems.length">
                        <img :src="currentLand.src" :title="currentLand.name" @click="isGridListShow = !isGridListShow">
                    </div>
                    <div class="grid-options" v-show="isGridListShow">                        
                        <div class="grid-item" v-for="item in landItems" @click="changeLand(item)">
                            <img :src="item.src" :title="item.name">
                        </div>
                    </div>
                </div>
                <div class="f-item"><button id="generate" @click="createMap">创建</button></div>
                <div class="f-item"><label for="level-name">地图名称</label><input style="width:120px" id="level-name" type="text" v-model="mapName"></div>
                <div class="f-item">
                    <button @click="saveMapHandler">保存</button>
                </div>
            </div>
        </div>
        <div class="show">
            <div class="map-grids">
                <div class="list">
                    <div class="grid-item" :class="{active:index ===currentIndex}" v-for="(item,index) in gridItems" @click="setCurrentIndex(index)">
                        <img :src="item.src" :title="item.name">
                    </div>
                </div>
                <div class="info" v-if="gridItems[currentIndex]">
                    <div>名称：{{gridItems[currentIndex].name}}</div>
                    <div>空：{{gridItems[currentIndex].air}}</div>
                    <div>陆：{{gridItems[currentIndex].land}}</div>
                    <div>海：{{gridItems[currentIndex].ocean}}</div>
                </div>
            </div>
            <div class="draw-rect">
                <div class="slider-rect">
                    <canvas id="draw-map" ref="canvas" @mousedown="clickToPaint" @mouseup="painting=false" @mousemove="paintGrid"></canvas>
                </div>
            </div>
            <div class="unit-editor"></div>
        </div>
    </div>
    <script src="../assets/js/lib/axios.js"></script>
    <script src="../assets/js/mapeditor.js" type="module"></script>
</body>

</html>